<template>
    <rx-dialog @handOk="handOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <div class="tipsClass">
                    <i class="iconfont iconicon-test33"></i><span style="margin-left: 5px;">{{i18n1('list.WarmPrompt','温馨提示')}}</span>
                    <div>
                        <tr style="margin-left: 5px;">1.this.customQueryData{{i18n1('list.obtainData','(获取自定义查询的数据)')}}</tr>
                        <tr style="margin-left: 15px;">{{i18n1('list.publishEvent','2.通过this.customViewEvent({KEY:值})发布事件')}}</tr>
                        <tr style="margin-left: 15px;">
                            {{i18n1('list.manual','操作手册')}}:<a target="_blank" href="https://alidocs.dingtalk.com/i/p/Dnb9XJlQxLaGyAp7pLmkQwq0V5b5az2g">https://alidocs.dingtalk.com/i/p/Dnb9XJlQxLaGyAp7pLmkQwq0V5b5az2g</a>
                        </tr>
                    </div>
                </div>
                <a-tabs default-active-key="1" >
                    <a-tab-pane key="1" tab="HTML">
                        <rx-monaco-editor
                            ref="htmlEditor"
                            language="html"
                            v-model="template"
                            class="monacoEditor"
                        >
                            <template v-slot:monacoeditor>
                                <a-button @click="setCustomColumn">{{i18n('list.customCol','自定义页面栏目')}}</a-button>
                            </template>
                        </rx-monaco-editor>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="jsScript" force-render>
                        <rx-monaco-editor
                            ref="monacoEditor"
                            language="javascript"
                            v-model="jsScript"
                            class="monacoEditor"
                        >
                            <template v-slot:monacoeditor>
                                <a-dropdown :getPopupContainer="p=>p.parentNode">
                                    <a-menu slot="overlay">
                                        <template v-for="item in scriptInsertAry">
                                            <a-menu-item :key="item.clickEvent" v-if="!item.children"
                                                         @click="handInsertScript(item)"> {{ item.name }}
                                            </a-menu-item>

                                            <a-sub-menu :key="item.name"
                                                        v-if="item.children && item.children.length>0">
                                                <span slot="title">{{ item.name }}</span>
                                                <a-menu-item :key="subItem.name"
                                                             v-for="subItem in item.children"
                                                             @click="handInsertScript(subItem)">
                                                    {{ subItem.name }}
                                                </a-menu-item>
                                            </a-sub-menu>
                                        </template>
                                    </a-menu>
                                    <a-button style="margin-left: 8px" size="small">
                                        {{i18n('script.insertScript','插入脚本')}}
                                        <a-icon type="down"/>
                                    </a-button>
                                </a-dropdown>

                                <rx-common-script  @select="insertScript" use-to="portal-customPortal" type="0" >
                                    <template v-slot:button>
                                        <a-button style="margin-left: 8px" size="small">
                                            {{i18n('script.insertCode','插入脚本')}}
                                            <a-icon type="down"/>
                                        </a-button>
                                    </template>
                                </rx-common-script>

                            </template>
                        </rx-monaco-editor>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="cssStyle">
                        <rx-monaco-editor
                            ref="cssEditor"
                            language="css"
                            v-model="cssStyle"
                            class="monacoEditor"
                        >
                        </rx-monaco-editor>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxDialog, RxLayout,Util,RxMonacoEditor,RxCommonScript} from "@lowcode/jpaas-common-lib";
import scriptInsert from "@/views/modules/form/core/formComponent/scriptInsert.js";
import CustomPageColumnDialog from "@/views/modules/portal/core/CustomPageColumnDialog.vue";
export default {
    name: "CustomViewTemplate",
    mixins:[scriptInsert],
    props: {
        config:{
            type:Object
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
    },
    components: {
        RxDialog,
        RxLayout,
        RxMonacoEditor,
        RxCommonScript
    },
    data() {
        return {
            template:"",
            jsScript:"export default {\n" +
                "    props: {\n" +
                "        //" + this.i18n2('queryData', '自定义查询数据') + "\n" +
                "        customQueryData: {type: Array,default:[]},\n" +
                "        //" + this.i18n2('config', '配置') + "\n" +
                "        config: {type: Object,default:{}},\n" +
                "        //" + this.i18n2('param', '参数') + "\n" +
                "        params: {type: Object,default:{}},\n" +
                "    },\n" +
                "   //" + this.i18n2('defaultJsDesc1', '数据定义') + "\n" +
                "    data(){\n" +
                "        return {\n" +
                "        }\n" +
                "    },\n" +
                "    //" + this.i18n2('defaultJsDesc2', '初始化时加载') + "\n" +
                "    created(){},\n" +
                "    //" + this.i18n2('defaultJsDesc3', '页面自定义函数') + "\n" +
                "    methods:{\n" +
                "        /**\n" +
                "         * @param data {key:value}\n" +
                "         */\n" +
                "        customViewEvent(data){\n" +
                "            this.$emit('customViewEvent',{component:this.config.alias,params:data});\n" +
                "        }\n" +
                "    },\n" +
                "    //" + this.i18n2('defaultJsDesc5', '页面自定义观察函数') + "\n" +
                "    watch:{}\n" +
                "}",
            cssStyle:""
        }
    },
    created() {
        this.template=this.config.template;
        if(this.config.jsScript){
            this.jsScript=this.config.jsScript;
        }
        if(this.config.cssStyle){
            this.cssStyle=this.config.cssStyle;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        i18n1(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        i18n2(name, text, key) {
            return this.$ti18(name, text, "scriptInsertLang", key);
        },
        Custi18n(name, text, key) {
            return this.$ti18(name, text, "customPageColumn", key);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        handOk() {
            var obj={
                template:this.template,
                jsScript:this.jsScript,
                cssStyle:this.cssStyle,
            }
            Util.closeWindow(this, "ok", obj);
        },
        setCustomColumn(){
            let self=this;
            this.$confirm({
                title: "选择自定义页面栏目会覆盖当前的HTML、JS、CSS，确定要继续吗？",
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex:99999,
                onOk() {
                    Util.open({
                        component: CustomPageColumnDialog,
                        curVm: self,
                        title: self.i18n('list.customCol','自定义页面栏目'),
                        widthHeight: ['750px', '500px'],
                    }, function (action, data) {
                        if(action!='ok') return;
                        self.template = data.template || "";
                        if(data.javascript){
                            self.jsScript =  data.javascript
                        }
                        if(data.cssStyle){
                            self.cssStyle =  data.cssStyle
                        }
                    });
                },
                onCancel() {},
            });
        }
    },
    watch: {}
}
</script>

<style scoped>
.tipsClass {
    border: 1px solid #e6e8eb;
    border-left: 3px solid #2e8cff !important;
    padding: 20px;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20px;
    letter-spacing: 0px;
    color: #555555;
    margin: 10px;
}
.monacoEditor{
    margin: 0px 10px;
    width: calc(100% - 20px)!important;
    height: 500px!important;
}
</style>